<style>
    .help-block span{color:blue;cursor: pointer}
</style>
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <form role="form" class="form-horizontal" action="/User/DailySign/setting" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id" value="{$id}">
                <header class="panel-heading">
                    {$daily_sign["title"]} - 分享设置
                </header>
                <div class="panel-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">分享标题</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control" name="share_title" value="{$daily_sign['share_title']}">
                                <p class="help-block">默认标题为 日期+昵称 领取了今日签，快来领取你的今日签。</p>
                                <p class="help-block">可选参数：<span class="title-span">【时间】</span><span class="title-span">【昵称】</span>，点击添加。</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-2 col-sm-2 control-label">分享描述</div>
                            <div class="col-lg-6">
                                <textarea name="share_desc" style="width:550px;height:150px">{$daily_sign["share_desc"]}</textarea>
                                <p class="help-block">默认描述为 昵称+宜忌 的相关文案。</p>
                                <p class="help-block">可选参数：<span class="desc-span">【时间】</span>
                                    <span class="desc-span">【昵称】</span><span class="desc-span">【宜忌】</span>，点击添加。</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">分享链接</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control" name="share_link" value="{$daily_sign['share_link']}">
                                <p class="help-block">默认为首页链接</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label">分享图标</label>
                            <div class="col-lg-6">
                                <img class="share-img" src="{$daily_sign['share_image']}" width="100px" height="100px">
                                <input type="file" id="share_image" accept="image/gif,image/jpeg,image/jpg,image/png">
                                <input type="hidden" name="share_image" value="{$daily_sign['share_image']}">
                                <p class="help-block">有默认的分享图标，可自定义替换，尺寸建议50px*50px，格式支持jpg、jpeg、png、gif</p>
                            </div>
                        </div>
                        <button type="submit" style="margin-left:100px" class="btn btn-info">确定</button>
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>

<script type="text/javascript">
    $('.title-span').click(function(){
        var value = $(this).text();
        var share_title = $('input[name=share_title]');
        var content = share_title.val() + value;
        share_title.val(content)
    });

    $('.desc-span').click(function(){
        var value = $(this).text();
        var share_desc = $('textarea[name=share_desc]');
        var content = share_desc.val() + value;
        share_desc.val(content)
    });

    $('#share_image').change(function(){
        var files = this.files;
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = function (e) {
            $.ajax({
                data: {image: e.target.result},
                dataType: 'json',
                url: '/User/DailySign/uploadImage',
                type: 'post',
                success: function (res) {
                    console.log(res);
                    $('.share-img').attr('src', res.msg);
                    $('input[name=share_image]').val(res.msg);
                }
            });
        }
    })

</script>